<!-- 店铺banner -->
<template>
    <div class="s-banner">
        <el-carousel height="375px">
            <template v-if="!loading">
                <template v-if="list.length > 0">
                    <el-carousel-item v-for="(item, index) in list" :key="index">
                        <img :src="serFileUrl + item.fileUrl" alt="">
                    </el-carousel-item>
                </template>
                <el-carousel-item v-else>
                    <img src="../../static/img/shop_banner_default.jpg" alt="default">
                </el-carousel-item>
            </template>
            <template v-if="isEditor">
                <div class="banner-ceng"></div>
                <div @click="isShow = true">
                    <add-btn btn-name="新建轮播" btn-width="420px" btn-height="314px"></add-btn>
                </div>
            </template>
        </el-carousel>
        <el-dialog
            width="800px"
            title="上传店铺轮播图"
            :visible.sync="isShow"
            custom-class="cp-dialog"
            :append-to-body="true"
            :close-on-click-modal="false"
        >
            <div v-loading="diaologLoading">
                <upload-file
                    v-if="isShow"
                    :original-file-list="originalFileList"
                    :oss-limit="10"
                    :oss-file-size="10"
                    oss-formater="jpg,gif,png,jpeg,bmp"
                    oss-list-type="picture"
                    oss-btn-tile="<span class='el-icon-plus'></span><p>上传</p>"
                    oss-value="banner"
                    oss-accept="image/jpg,image/gif,image/png,image/jpeg,image/bmp"
                    :oss-target="`qiao/${shopId}/file`"
                    :oss-multiple="true"
                    is-cropper
                    :cropper-width="1200"
                    :img-ratio="1200/375"
                    @deleteFileCallback="deleteFileCallback"
                    @handleChangeFile="handleChangeFile"
                ></upload-file>
                <el-button type="primary" @click="diaologSumbit">
                    提交
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Component,
    Prop,
    Watch
} from 'nuxt-property-decorator'
import uploadFile from '../modules/ossUploadFile.vue'
import addBtn from './addbtn.vue'
import {serFileUrl} from '~/../config/server.url.conf'
import {updateBanner, getShopBanner} from '~/api/shop'

@Component({
    name: 'shopBannner',
    components: {
        addBtn,
        uploadFile
    }
})
export default class ShopBanner extends Vue {
    loading: boolean = true
    serFileUrl: string = serFileUrl
    diaologLoading: boolean = true
    isShow: boolean = false
    form: any = {
        id: '',
        banner: '',
        bannerNum: ''
    }
    originalFileList: any = []
    list: any = []
    newImgList: any = []
    @Prop()
    shopInfo!: any
    @Prop({
        type: Boolean,
        default: false
    })
    isEditor!: boolean
    @Watch('shopInfo.id', {immediate: true, deep: true})
    initList (nv: any) {
        if (nv && this.shopInfo && this.shopInfo.header && this.shopInfo.header.banner) {
            this.list = this.shopInfo.header.banner
        }
        this.loading = false
    }
    @Watch('isShow', {immediate: false, deep: true})
    showStatusChange (nv: boolean) {
        if (nv) {
            const len: number = this.list.length
            if (len > 0) {
                this.form.banner = ''
                this.form.bannerNum = len
                this.originalFileList = JSON.parse(JSON.stringify(this.list))
            }
            this.diaologLoading = false
        }
    }
    handleChangeFile (json: any) {
        const data = json.data
        this.newImgList = data
        this.form[json.filevalue] = data && data.length > 0 ? JSON.stringify(data) : ''
        this.form[json.filevalue + 'Num'] = json.num > 0 ? json.num.toString() : ''
        // this.validateFieldInput(json.filevalue + 'Num')
    }
    deleteFileCallback (json: any) {
        const del = this.form.delIds ? this.form.delIds.split(',') : []
        del.push(json.id)
        this.form.delIds = del.join(',')
    }
    cleanForm () {
        this.form.banner = ''
        this.form.bannerNum = ''
        this.newImgList = []
    }
    async diaologSumbit () {
        const form = {...this.form}
        if (!form.bannerNum) {
            this.$message.error('请上传图片')
            return false
        }
        const nli = this.newImgList
        this.diaologLoading = true
        this.list = [...this.list, ...JSON.parse(JSON.stringify(nli))]
        form.id = this.shopInfo.id
        if (!form.banner) {
            delete form.banner
        }
        delete form.bannerNum
        if (form.delIds) {
            form.removeIds = form.delIds
        }
        const {data}: any = await updateBanner(form)
        if (data.flag) {
            window.location.reload()
            // this.getShopBanner()
        } else {
            this.$message.error(data.msg)
            this.diaologLoading = false
        }
    }
    async getShopBanner () {
        const {data}: any = await getShopBanner(this.shopInfo.id)
        if (data.flag) {
            this.isShow = false
            this.list = data.data
            this.$store.commit('setShopBanner', this.list)
            this.cleanForm()
        }
    }
}
</script>

<style lang="scss" scoped>
    .s-banner{
        border-radius: 4px;
        overflow: hidden;
    }
    .banner-ceng{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #030303;
        opacity: 0.6;
        z-index: 2;
    }
    .cp-dialog{
        .el-button{
            margin-top: 20px;
            &.el-button--primary{
                background-color: $blue;
                border-color: $blue;
                &:hover{
                    color: #fff;
                    background-color: lighten($blue, 15);
                    border-color: lighten($blue, 15);
                }
            }
        }
    }
</style>

<style lang="scss">
    .s-banner{
        .el-carousel{
            .el-carousel__item{
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .el-carousel__arrow{
                display: none;
            }
            .el-carousel__indicators{
                left: auto;
                right: 24px;
                transform: translateX(0);
                bottom: 4px;
                .el-carousel__button{
                    width: 8px;
                    height: 6px;
                    border-radius: 3px;
                    background-color: #777373;
                }
                .is-active .el-carousel__button{
                    width: 16px;
                    background-color: #fff;
                }
            }
        }
    }
</style>
